<template>
  <view class="match-card mt-20rpx p-32rpx rounded-md bg-white">
    <view class="head flex h-100rpx">
      <view class="flex-1 justify-right items-center">
        <text>
          {{ playgroundName }}
        </text>
      </view>
      <view class="flex-grow flex-3 flex justify-center items-center flex-col">
        <text>{{ matchTime }}</text>
        <text>{{ matchStatusTextEnum[renderMatchItem.status || 1] }}</text>
      </view>
      <view class="flex-1 justify-right items-center">
        <!-- <wd-tag :type="getCheckInStatus.color">{{ getCheckInStatus.label }}</wd-tag> -->
      </view>
    </view>
    <view class="body flex h-140rpx">
      <view
        class="flex-1 flex justify-center items-center"
        :class="renderMatchItem.homePlayerId === renderMatchItem.winnerId ? 'color-#F9AE3D' : ''"
      >
        <block v-if="renderMatchItem.homePlayerName">
          <wd-tag
            class="shrink-0"
            :type="
              renderMatchItem.homePlayerStatus === 3
                ? 'danger'
                : renderMatchItem.homePlayerStatus === 2
                  ? 'success'
                  : 'default'
            "
          >
            {{ MatchPlayerStatusText[renderMatchItem.homePlayerStatus || 1] }}
          </wd-tag>
          <text
            class="text-34rpx ml-10rpx"
            @click="
              () => {
                showUpdatePlayerPop(renderMatchItem.homePlayer, renderMatchItem.homePlayerName)
              }
            "
          >
            {{ renderMatchItem.homePlayerName }}
          </text>
        </block>
        <!-- <text class="text-30rpx">({{ renderMatchItem.homePlayer }})</text> -->
      </view>
      <view class="flex-1 flex justify-center items-center">
        <text class="font-700 text-56rpx color-#F9AE3D">{{ renderMatchItem.homePlayerRally }}</text>
        <text class="font-700 text-56rpx color-#F9AE3D">:</text>
        <text class="font-700 text-56rpx color-#F9AE3D">{{ renderMatchItem.awayPlayerRally }}</text>
      </view>
      <view
        class="flex-1 flex justify-center items-center"
        :class="renderMatchItem.awayPlayerId === renderMatchItem.winnerId ? 'color-#F9AE3D' : ''"
      >
        <block v-if="renderMatchItem.awayPlayerName">
          <text
            class="text-34rpx mr-10rpx"
            @click="
              () => {
                showUpdatePlayerPop(renderMatchItem.awayPlayer, renderMatchItem.awayPlayerName)
              }
            "
          >
            {{ renderMatchItem.awayPlayerName }}
          </text>
          <wd-tag
            class="shrink-0"
            :type="
              renderMatchItem.awayPlayerStatus === 3
                ? 'danger'
                : renderMatchItem.awayPlayerStatus === 2
                  ? 'success'
                  : 'default'
            "
          >
            {{ MatchPlayerStatusText[renderMatchItem.awayPlayerStatus || 1] }}
          </wd-tag>
        </block>
        <!-- <text class="text-30rpx">({{ renderMatchItem.awayPlayer }})</text> -->
      </view>
    </view>
    <view class="footer text-center h-60rpx">
      <text class="color-#909193 text-22rpx">
        {{ matchInfo }}
      </text>
    </view>
    <view v-if="renderMatchItem.isTeamMatch && renderMatchItem?.subMatchInfos?.length">
      <wd-button
        type="text"
        @click="
          () => {
            showTeamSubMatchInfo(renderMatchItem)
          }
        "
      >
        查看子比赛
      </wd-button>
    </view>
    <wd-popup
      v-model="teamSubMatchInfoShowStatus"
      position="bottom"
      custom-style="height: 80vh; overflow: auto;"
    >
      <view class="bg-#F5F5F5 p-20rpx">
        <MatchListItem
          v-for="item in teamSubMatchList"
          :matchItem="item"
          v-bind:key="item.id"
        ></MatchListItem>
      </view>
    </wd-popup>

    <wd-action-sheet
      v-model="showCheckinPop"
      :actions="[{ name: '签到' }, { name: '弃权', color: '#fa4350' }]"
      @select="updatePlayerStatus"
    />
  </view>
</template>

<script setup lang="ts">
import { Group, EventToPlayer, Match } from '@/championship'
import {
  MatchStatusText,
  MatchPlayerStatusText,
  MatchPlayerStatusEnum,
  MatchStatusEnum,
} from '@/common/enum'
import { playerCheckIn, playerGiveUp } from '@/service/match'
import dayjs from 'dayjs'
import { useMessage, useToast } from 'wot-design-uni'

defineOptions({
  name: 'MatchListItem',
})
const props = defineProps<{
  matchItem: Match
}>()

const toast = useToast()

const renderMatchItem = ref(props.matchItem)

const teamSubMatchList = ref<Match[]>([])
const matchStatusTextEnum = ref(MatchStatusText)
const checkinPlayerName = ref('')
const checkinPlayerRegIndex = ref(null)
const showCheckinPop = ref(false)
const playgroundName = ref(
  renderMatchItem.value.playground?.name || renderMatchItem.value.subPlayground?.name || '',
)
// const matchPlayerStatusTextEnum = ref(MatchPlayerStatusText)
const teamSubMatchInfoShowStatus = ref(false)
const getCheckInStatus = computed(() => {
  const statusArr = [renderMatchItem.value.homePlayerStatus, renderMatchItem.value.awayPlayerStatus]
  if (statusArr.filter((item) => item === MatchPlayerStatusEnum.NotCheckIn).length === 2) {
    return { label: '未检录', color: 'default' }
  } else if (statusArr.filter((item) => item === MatchPlayerStatusEnum.CheckedIn).length === 2) {
    return { label: '已检录', color: 'success' }
  } else {
    return { label: '检录中', color: 'danger' }
  }
})
const matchTime = computed(() => {
  const format = (val) => {
    return dayjs(new Date(val)).format('HH:mm:ss')
  }
  const { estimatedStart, estimatedEnd, actualStart, actualEnd, status } = renderMatchItem.value
  if (!estimatedStart && !estimatedEnd && !estimatedEnd && !actualEnd) {
    return ''
  }
  if (status === MatchStatusEnum.Finished) {
    return `${format(actualStart)}-${format(actualEnd)}`
  } else if (status === MatchStatusEnum.InProgress) {
    return `${format(actualStart)}`
  } else if (estimatedStart && estimatedEnd) {
    return `${format(estimatedStart)}-${format(estimatedEnd)}`
  } else {
    return '未编排'
  }
})
const matchInfo = computed(() => {
  const infoArr = []
  if (renderMatchItem.value.groupName) {
    infoArr.push(renderMatchItem.value.groupName)
  }
  if (renderMatchItem.value.matchTypeText) {
    infoArr.push(renderMatchItem.value.matchTypeText)
  }
  if (renderMatchItem.value.groupLoopIndex) {
    infoArr.push(`第${renderMatchItem.value.groupLoopIndex}阶段`)
  }
  if (renderMatchItem.value.stageName) {
    infoArr.push(renderMatchItem.value.stageName)
  }
  infoArr.push(`(${renderMatchItem.value.id})`)
  return infoArr.join('  ')
})

const showTeamSubMatchInfo = (match: Match) => {
  teamSubMatchList.value = match.subMatchInfos
  teamSubMatchInfoShowStatus.value = true
}
const showUpdatePlayerPop = (playerId: string, playerName: string) => {
  checkinPlayerName.value = playerName
  checkinPlayerRegIndex.value = playerId
  showCheckinPop.value = true
}

const updatePlayerStatus = async (actionParam: { index: 0 }) => {
  console.log(status)
  const { index } = actionParam
  const updateApi = index === 0 ? playerCheckIn : playerGiveUp
  const newStatus = index === 0 ? MatchPlayerStatusEnum.CheckedIn : MatchPlayerStatusEnum.GiveUp
  await updateApi({
    matchId: props.matchItem.id,
    registrationIndex: checkinPlayerRegIndex.value,
  })
  toast.show('更新成功')
  if (checkinPlayerRegIndex.value === renderMatchItem.value.homePlayer) {
    renderMatchItem.value.homePlayerStatus = newStatus
  } else if (checkinPlayerRegIndex.value === renderMatchItem.value.awayPlayer) {
    renderMatchItem.value.awayPlayerStatus = newStatus
  }
  checkinPlayerName.value = null
  checkinPlayerRegIndex.value = null
}
</script>
